<template>
  <div>
    <dl>
      <dt>
        <div class="dt-top">
          <div class="img-box">
            <router-link to="">
              <img :src="biaosheng.coverImgUrl" alt="" />
            </router-link>
          </div>
          <div class="title">
            <router-link to="">
              <h3>{{ biaosheng.name }}</h3>
            </router-link>
            <a href="" class="icon-bofang"></a>
            <a href="" class="icon-shouchang"></a>
          </div>
        </div>
      </dt>
      <dd>
        <ol>
          <li
            v-for="(item, index) in list.slice(0, 3)"
            :key="index"
            class="qian"
          >
            <div class="qian-box">
              <span>{{ index + 1 }}</span>
              <a href="" class="gequ">{{ item.name }}</a>
            </div>
            <div class="oper">
              <a href="javascript:;" class="oper-bofang" @click="bofang(item.id)"></a>
              <a href="javascript:;" class="oper-tianjia"></a>
              <a href="javascript:;" class="oper-shouchang"></a>
            </div>
          </li>
          <li
            v-for="(item, index) in list.slice(3, 10)"
            :key="index"
            class="hou"
          >
            <div class="hou-box">
              <span>{{ index + 4 }}</span>
              <a href="" class="gequ">{{ item.name }}</a>
            </div>
            <div class="oper">
              <a href="javascript:;" class="oper-bofang" @click="bofang(item.id)"></a>
              <a href="javascript:;" class="oper-tianjia"></a>
              <a href="javascript:;" class="oper-shouchang"></a>
            </div>
          </li>
          <li class="last"><router-link to="">查看全部></router-link></li>
        </ol>
      </dd>
    </dl>
  </div>
</template>

<script>

export default {
  props: ["biaosheng"],
  data() {
    return {
      list: this.biaosheng.tracks,
    };
  },
  methods: {
      bofang(id){
          console.log(id);
          this.$store.commit('gaibianid',id)
      }
  },
};
</script>

<style lang="less" scoped>
.gequ {
  width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qian-box,
.hou-box {
  display: flex;
  align-items: center;
}
.oper {
  display: none;
  width: 82px;
  height: 32px;
  margin-top: 7px;
  a {
    margin-right: 6px;
    display: inline-block;
    vertical-align: middle;
  }
  .oper-bofang {
    background: url("../imgs/iconall.png") no-repeat 0 -85px;
    width: 22px;
    height: 22px;
  }
  .oper-tianjia {
    background: url("../imgs/icon.png") no-repeat 0 -700px;
    width: 14px;
    height: 15px;
  }
  .oper-shouchang {
    background: url("../imgs/icon.png") no-repeat 0 -540px;
    width: 13px;
    height: 11px;
  }
}
.qian > .oper {
  display: none;
  width: 82px;
  height: 32px;
  margin-top: 7px;
  align-items: center;
  a {
    margin-right: 6px;
    display: inline-block;
    vertical-align: middle;
  }
  .oper-bofang {
    background: url("../imgs/iconall.png") no-repeat 0 -85px;
    width: 22px;
    height: 22px;
  }
  .oper-tianjia {
    background: url("../imgs/icon.png") no-repeat 0 -700px;
    width: 14px;
    height: 15px;
  }
  .oper-shouchang {
    background: url("../imgs/icon.png") no-repeat 0 -540px;
    width: 13px;
    height: 11px;
  }
}
ol > li:nth-child(2n-1) {
  background-color: #e8e8e8;
}
.qian:hover .gequ,
.hou:hover .gequ {
  display: inline-block;
  text-decoration: underline;
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qian:hover .oper,
.hou:hover .oper {
  display: block;
}
.last {
  display: flex;
  justify-content: flex-end;
  font-size: 14px;
  padding-right: 20px;
  a {
    color: #666;
  }
}
dl {
  width: 230px;
  box-sizing: border-box;
  border: 1px solid #d2d2d2;
  margin-top: 20px;
}
// dt
dt {
  .dt-top {
    display: flex;
    height: 100px;
    padding: 20px 0 0 19px;
  }
  .img-box {
    img {
      width: 80px;
    }
  }
  .title {
    width: 116px;
    margin: 6px 0 0 10px;
    height: 51px;
    position: relative;
    a {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-wrap: normal;
      color: #333;
      h3 {
        font-size: 14px;
      }
    }
    .icon-bofang {
      position: absolute;
      top: 29px;
      left: 0px;
      background: url("../imgs/index.png") no-repeat -267px -205px;
      width: 22px;
      height: 22px;
    }
    .icon-bofang:hover {
      background: url("../imgs/index.png") no-repeat -267px -235px;
    }
    .icon-shouchang:hover {
      background: url("../imgs/index.png") no-repeat -300px -237px;
    }
    .icon-shouchang {
      position: absolute;
      top: 31px;
      left: 35px;
      background: url("../imgs/index.png") no-repeat -300px -207px;
      width: 20px;
      height: 19px;
    }
  }
}
dd {
  ol > li {
    padding-left: 19px;
    display: flex;
    height: 32px;
    align-items: center;
    justify-content: space-between;
    .gequ {
      width: 170px;
      font-size: 12px;
      color: #666;
    }
  }
  .qian span {
    display: inline-block;
    color: #c10d0c;
    width: 30px;
    text-align: center;
  }
  .hou span {
    display: inline-block;
    color: #666;
    width: 30px;
    text-align: center;
  }
}
</style>